<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, user-scalable=0, width=device-width" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta content="telephone=no" name="format-detection">
		<title>城市选择</title>
		<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/three/mui.css" /> 
		<link rel="stylesheet" type="text/css" href="../../../css/three/mui.picker.css" />
		<style>
			.takeaddresscontentbox { 
				margin-top: 44px;
			}
			 
			.heand_con {
				width: auto;
				padding-left: 0;
			}
			.mui-action-back{
				position: absolute;
				width: 10%;
			}
			.mui-action-back img {
				width: 0.2rem;
				margin-left: 0.2rem;
				margin-top: 0.3rem;
			}
			
			.addaddress {
				position: absolute;
				bottom: 0;
				right: 0.2rem;
			}
			
			#city_text {
				text-align: center;
				background: #fff;
				height: 40px;
				line-height: 40px;
			}
			
			#detailcontent {
				height: 200px;
				margin: 0;
				border: none;
				border-top: solid 1px #ccc;
			}
			.default{
				padding: 0 0.2rem;
				background: #fff;
				height: 40px;
				line-height: 40px;
				border-top: solid 1px #ccc;
			}
			.infobox{
				background: #fff;
			}
			.mui-switch{
				margin-top: 0.1rem;
			}
			#delbtn{
				background: #e75b00;
				width: 30%;
				margin: 0 auto;
				text-align: center;
				color: #fff;
				border-radius: 10px;
				margin-top: 10px;
				height: 0.5rem;
				line-height: 0.5rem;
				font-size: 14px;
			}
			 .takeaddresscontentbox {
            margin-top: 44px;
        }
        
        .heand_con {
            width: auto;
            padding-left: 0;
        }
        
        .mui-action-back {
            position: absolute;
            width: 10%;
        }
        
        .mui-action-back img {
            width: 0.2rem;
            margin-left: 0.2rem;
            margin-top: 0.3rem;
        }
        
        .addaddress {
            position: absolute;
            bottom: 0;
            right: 0.2rem;
        }
        
        #city_text {
            text-align: center;
            background: #fff;
            height: 40px;
            line-height: 40px;
        }
        
        #detailcontent {
            height: 200px;
            margin: 0;
            border: none;
            border-top: solid 1px #ccc;
        }
        
        .default {
            padding: 0 0.2rem;
            background: #fff;
            height: 40px;
            line-height: 40px;
            border-top: solid 1px #ccc;
        }
        
        .infobox {
            background: #fff;
        }
        
        .mui-switch {
            margin-top: 0.1rem;
        }
        
        .newCons {
            padding-top: 60px;
            padding-left: 10px;
            padding-right: 10px;
        }
        
        .newTitile {
            margin-bottom: 10px;
        }
        
        .newTitile input {
            border-radius: 100px;
            border: 1px solid #dcdcdc;
            height: 50px;
            line-height: 50px;
            padding-left: 20px;
        }
        
        .newTitile span {
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
        }
        
        .newTitile #city_text {
            border-radius: 100px;
            border: 1px solid #dcdcdc;
            height: 50px;
            line-height: 50px;
            padding-left: 20px;
        }
        
        .newTitile textarea {
            border-radius: 10px;
            border: 1px solid #dcdcdc!important;
        }
		</style>
		<script src="../../../js/three/jquery.min.js"></script>
	</head>

	<body>
		<div class="header">
			<div class="mui-back mui-action-back fl"><img src="../../../images/icon/Back_j.png"></div>
			<div class="heand_con">管理收货地址</div>
			<div class="addaddress" id="addaddress">
				修改 
			</div>
			<div class="clear"></div>
		</div>
		 <div class="newCons">
        <div class="newTitile">
            <span>姓名</span>
            <input id="name" type="text" placeholder="姓名">
        </div>
        <div class="newTitile">
            <span>电话</span>
            <input id="tel" type="text" placeholder="手机号码">
        </div>
        <div class="newTitile">
            <span>选择地区</span>
            <div id="city_text">请选择所在地区</div>
        </div>
        <div class="newTitile">
            <span>详细地址</span>
            <textarea id="detailcontent" placeholder="详细地址"></textarea>
        </div>
        <div class="newTitile" style="position: relative;">
            <span>设为默认</span>
            <div class="mui-switch mui-switch-mini fr" style="position: absolute;top: -10px;right: 0px;">
                <div class="mui-switch-handle"></div>
            </div>
        </div>
        <div id="delbtn">删除</div>
    </div>
		<!--<div class="takeaddresscontentbox">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<input id="name" type="text" placeholder="姓名">
				</div>
				<div class="mui-input-row">
					<input id="tel" type="text" placeholder="手机号码">
				</div>
			</form>
			<div class="infobox">
				<div id="city_text">请选择所在地区</div> 
			<!--input type="text" id="city_id" /-->
			<!--<textarea id="detailcontent" placeholder="详细地址"></textarea>
			<div class="default">
				<span class="fl">设为默认</span>
				<div class="mui-switch mui-switch-mini fr">
					<div class="mui-switch-handle"></div>
				</div>
				<div class="clear"></div>
			</div>
			</div>
			

		</div>-->

	</body>
	<script src="../../../js/three/mui.min.js"></script>
	<script src="../../../js/app.js"></script>
	<script src="../../../js/vue.min.js"></script> 
	<script src="../../../js/token.js"></script>
	<script src="../../../js/three/data.city.js"></script>
	<script src="../../../js/three/mui.picker.min.js"></script>
	<script src="../../../js/verification.js"></script>
	<script>
		mui.back = function(event) {
			
				var ws=plus.webview.currentWebview()   
				if(ws) {
					ws.close() 
				}else {
					backButtonPress++;
					if(backButtonPress > 1) {
						plus.runtime.quit();
					} else {
						plus.nativeUI.toast('再按一次退出应用');
					}
					setTimeout(function() {
						backButtonPress = 0;
					}, 1000);
					return false;
				}
			};
		mui.plusReady(function(){
			state = app.getState();
			uid = state.userid;
			memberToken = state.memberToken;
			var self = plus.webview.currentWebview();  
			name = self.name;
			tel = self.tel;
			pro=self.pro; 
			listid=self.listid;
			xiangxiaddress=self.xiangxiaddress;
			value=self.value
			if(value==1){
				$('.mui-switch').addClass('mui-active');
			}
			document.getElementById('name').value=name;
			document.getElementById('tel').value=tel;
			$("#city_text").html(pro);
			document.getElementById('detailcontent').value=xiangxiaddress;
			
			
			
		})
		//选择省市区
		var city_picker = new mui.PopPicker({
			layer: 3
		});
		city_picker.setData(init_city_picker);
		$("#city_text").on("tap", function() {
			setTimeout(function() {
				city_picker.show(function(items) {
					if(items[1].text==undefined){
						items[1].text='';
					}
					if(items[2].text==undefined){
						items[2].text='';
					}
					//$("#city_id").val((items[0] || {}).value + "," + (items[1] || {}).value + "," + (items[2] || {}).value); //该ID为接收城市ID字段
					$("#city_text").html((items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text);
				});
			}, 200);
		});
		document.getElementById('addaddress').addEventListener('tap',function(data){
			if(!verification.parentname(document.getElementById('name').value, "document.getElementById('name')")) return;
			if(!verification.phone(document.getElementById('tel').value, "document.getElementById('tel')")) return;
			
			if(document.getElementById('detailcontent').value==''){
				plus.nativeUI.toast('请输入详细地址');
				return
			}
			if($('.mui-switch').hasClass('mui-active')){
				value=1
			}else{
				value=''
			}
			
			mui.post(Apiurl+'shop/address',{
				uid:uid,
				memberToken:memberToken,
				receive_name:document.getElementById('name').value,
				receive_phone:document.getElementById('tel').value,
				province:document.getElementById('city_text').innerHTML,
				receive_address:document.getElementById('detailcontent').value,
				id:listid,
				value:value
			},function(data){
				if(data.status==200){
					plus.nativeUI.toast('修改成功');
					plus.webview.currentWebview().close();
					mui.fire(plus.webview.getWebviewById("takeaddress"), "refreshaddress", {});
					mui.fire(plus.webview.getWebviewById("shopconfirm"), "refreshaddress", {
					
					});
				}else if(data.status==201){
					plus.nativeUI.toast('修改失败');
				}
			},'json')
		})
		document.getElementById('delbtn').addEventListener('tap',function(){
			mui.post(Apiurl+'shop/addressdel',{
				uid:uid,
				memberToken:memberToken,
				id:listid
			},function(data){ 
				//alert(JSON.stringify(data)) 
				if(data.status==200){
					plus.nativeUI.toast('删除成功');
					plus.webview.currentWebview().close();
					mui.fire(plus.webview.getWebviewById("takeaddress"), "refreshaddress", {});
					mui.fire(plus.webview.getWebviewById("shopconfirm"), "refreshaddress", {
						del:1
					});
				}
			},'json')
		})
	</script>

</html>